{% extends 'base.html' %}
{% load static %}
{% block css %}
    <link rel="stylesheet" href="{% static 'assets/jqcloud/jqcloud.css' %}">
    <style>
        .panel-small {
            border: 1px solid #DDDDDD;
            box-shadow: none !important;
        }

        .panel-small .panel-heading {
            border-bottom: 1px solid #DDDDDD !important;
            padding: 15px 30px !important;
        }

        .panel-small .panel-heading .panel-title {
            font-size: 14px
        }
    </style>
{% endblock %}
{% block title %}
    资产总览
{% endblock %}
{% block page-title %}
    资产总览
{% endblock %}
{% block page-content %}
    <div class="row">
        <div class="col-lg-12">
            <div class="tab-content">
                <div class="tab-pane active" id="overview">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">矿场资产分析</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-lg-4">
                                            <div class="panel panel-color panel-default panel-small">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">存储机器分布</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <div id="storage_assets" style="height:240px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="panel panel-color panel-default panel-small">
                                                <div class="panel-heading" style="">
                                                    <h3 class="panel-title">GPU机器分布</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <div id="gpu_assets" style="height:240px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <div class="portlet"><!-- /primary heading -->
                                                <div class="portlet-heading">
                                                    <h3 class="portlet-title text-dark text-uppercase">
                                                        算力总和
                                                    </h3>
                                                    <div class="portlet-widgets">
                                                        <a href="javascript:;" data-toggle="reload"><i
                                                                class="ion-refresh"></i></a>
                                                        <span class="divider"></span>
                                                        <a data-toggle="collapse" data-parent="#accordion1"
                                                           href="#portlet2"><i
                                                                class="ion-minus-round"></i></a>
                                                        <span class="divider"></span>
                                                        <a href="#" data-toggle="remove"><i class="ion-close-round"></i></a>
                                                    </div>
                                                    <div class="clearfix"></div>
                                                </div>
                                                <div id="portlet2" class="panel-collapse collapse in">
                                                    <div class="portlet-body">
                                                        <div id="user-nums" style="height:240px;"></div>
                                                    </div>
                                                </div>
                                            </div> <!-- /Portlet -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3 class="panel-title">资产状态分析</h3>
                                </div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="panel panel-color panel-default panel-small">
                                                <div class="panel-heading">
                                                    <h3 class="panel-title">异常机器分布</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <div id="business_line_assets" style="height:240px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="panel panel-color panel-default panel-small">
                                                <div class="panel-heading" style="">
                                                    <h3 class="panel-title">异常机器标签云</h3>
                                                </div>
                                                <div class="panel-body">
                                                    <div id="tag_cloud" style="width: 100%; height: 240px;"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane " id="profile">
                </div>
                <div class="tab-pane" id="messages">
                </div>
                <div class="tab-pane" id="settings">
                </div>
            </div>
        </div>
    </div> <!-- End row -->
{% endblock %}
{% block js %}
    <script src="{% static 'assets/echarts/echarts.min.js' %}"></script>
    <script src="{% static 'assets/echarts/macarons.js' %}"></script>
    <script src="{% static 'assets/jqcloud/jqcloud-1.0.4.js' %}"></script>
    <script>
        //获取不同云的主机数量
        //var data = {{ overview.storage_asset_count|safe }};
        var data = [
            {
                "name": "宜兴 {{ overview.storage_count.宜兴|default:0 }}台",
                "value": {{ overview.storage_count.宜兴|default:0 }}
            },
            {
                "name": "成都 {{ overview.storage_count.成都|default:0 }}台",
                "value": {{ overview.storage_count.成都|default:0 }}
            },
            {
                "name": "内蒙古 {{ overview.storage_count.内蒙古|default:0 }}台",
                "value": {{ overview.storage_count.内蒙古|default:0 }}
            },
        ];
        var legend_data = [];
        var host_nums = 0;
        for (var i = 0; i < data.length; i++) {
            legend_data.push(data[i]['name']);
            host_nums += data[i]['value']
        }
        var cloudAssetsChart = echarts.init(document.getElementById('storage_assets'), 'macarons');
        var cloudAssetsOption = {
            title: {
                text: host_nums,
                textStyle: {
                    color: 'black',
                    fontWeight: 600,

                },
                subtext: '存储机器总量',
                subtextStyle: {
                    color: 'black',
                    fontSize: 15,
                },
                top: '40%',
                left: '20%',
            },
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                data: legend_data,
                selectedMode: false,
                top: 'middle',
                left: '70%',
                itemGap: 20,
            },
            series: [
                {
                    name: '云类型',
                    type: 'pie',
                    center: ['30%', '50%'],
                    radius: ['50%', '90%'],
                    avoidLabelOverlap: true,
                    color:['rgba(72,236,245,0.91)','rgba(193,245,72,0.58)','rgba(72,156,245,0.74)'],
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: data
                }
            ]
        };
        cloudAssetsChart.setOption(cloudAssetsOption);
    </script>
    <script>
        var data = [
            {'name': '宜兴 {{ overview.gpu_count.宜兴|default:0 }}台', 'value': {{ overview.gpu_count.宜兴|default:0 }}},
            {'name': '成都 {{ overview.gpu_count.成都|default:0 }}台', 'value': {{ overview.gpu_count.成都|default:0 }}},
            {'name': '内蒙古 {{ overview.gpu_count.内蒙古|default:0 }}台', 'value': {{ overview.gpu_count.内蒙古|default:0 }}},
        ]
        var legend_data = [];
        var asset_count = 0;
        for (var i = 0; i < data.length; i++) {
            legend_data.push(data[i]['name']);
            asset_count += data[i]['value']
        }
        var cloudAssetsChart = echarts.init(document.getElementById('gpu_assets'), 'macarons');
        var cloudAssetsOption = {
            title: {
                text: asset_count,
                textStyle: {
                    color: 'black',
                    fontWeight: 600,

                },
                subtext: 'GPU机器总量',
                subtextStyle: {
                    color: 'black',
                    fontSize: 15,
                },
                top: '40%',
                left: '20%'
            },
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                data: legend_data,
                selectedMode: false,
                top: 'middle',
                left: '70%',
                itemGap: 20,
            },
            series: [
                {
                    name: '资产类型',
                    type: 'pie',
                    center: ['30%', '50%'],
                    radius: ['50%', '90%'],
                    avoidLabelOverlap: true,
                    color:['rgba(245,115,72,0.91)','rgba(72,245,193,0.58)','rgba(245,170,72,0.74)'],
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: data
                }
            ]
        };
        cloudAssetsChart.setOption(cloudAssetsOption);
    </script>
    <script>
        var data = [
            {
                "name": "宜兴 {{ overview.capacity_count.宜兴|default:0 }}T",
                "value": {{ overview.capacity_count.宜兴|default:0 }}
            },
            {
                "name": "成都 {{ overview.capacity_count.成都|default:0 }}T",
                "value": {{ overview.capacity_count.成都|default:0 }}
            },
            {
                "name": "内蒙古 {{ overview.capacity_count.内蒙古|default:0 }}T",
                "value": {{ overview.capacity_count.内蒙古|default:0 }}
            },
        ];
        var legend_data = [];
        var host_nums = 0;
        for (var i = 0; i < data.length; i++) {
            legend_data.push(data[i]['name']);
            host_nums += data[i]['value']
        }
        var cloudAssetsChart = echarts.init(document.getElementById('capacity_assets'), 'macarons');
        var cloudAssetsOption = {
            title: {
                text: host_nums,
                textStyle: {
                    color: 'black',
                    fontWeight: 600,

                },
                subtext: '算力总和',
                subtextStyle: {
                    color: 'black',
                    fontSize: 15,
                },
                top: '40%',
                left: '20%'
            },
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                data: legend_data,
                selectedMode: false,
                top: 'middle',
                left: '70%',
                itemGap: 20,
            },
            series: [
                {
                    name: '云类型',
                    type: 'pie',
                    center: ['30%', '50%'],
                    radius: ['50%', '90%'],
                    avoidLabelOverlap: true,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: data
                }
            ]
        };
        cloudAssetsChart.setOption(cloudAssetsOption);
    </script>
    <script>
        var data = [
            {
                'name': '存储机器故障 {{ overview.storage_error_count.故障中|default:0 }}台',
                'value': {{ overview.storage_error_count.故障中|default:0 }}
            },
            {
                'name': 'GPU机器故障 {{ overview.gpu_error_count.故障中|default:0 }}台',
                'value': {{ overview.gpu_error_count.故障中|default:0 }}
            },
            {
                'name': '存储机器暂停 {{ overview.storage_stop_count.已停止|default:0 }}台',
                'value': {{ overview.storage_stop_count.已停止|default:0 }}
            },
            {
                'name': 'GPU机器暂停 {{ overview.gpu_stop_count.已停止|default:0 }}台',
                'value': {{ overview.gpu_stop_count.已停止|default:0 }}
            },
        ];
        var legend_data = [];
        var host_nums = 0;
        for (var i = 0; i < data.length; i++) {
            legend_data.push(data[i]['name']);
            host_nums += data[i]['value']
        }
        var businessLineAssetsChart = echarts.init(document.getElementById('business_line_assets'), 'macarons');
        var businessLineAssetsOption = {
            title: {
                text: '    ' + host_nums,
                textStyle: {
                    color: 'black',
                    fontWeight: 600,

                },
                subtext: '异常机器总量',
                subtextStyle: {
                    color: 'black',
                    fontSize: 15,
                },
                top: '37%',
                left: '24%'
            },
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                data: legend_data,
                selectedMode: false,
                top: 'middle',
                left: '70%',
                itemGap: 20,
                formatter: function (name) {
                    let target;
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].name === name) {
                            target = data[i].value
                        }
                    }
                    return name + "   " + target
                }
            },
            series: [
                {
                    name: '业务线',
                    type: 'pie',
                    center: ['30%', '50%'],
                    radius: ['50%', '90%'],
                    avoidLabelOverlap: true,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: data
                }
            ]
        };
        businessLineAssetsChart.setOption(businessLineAssetsOption);
    </script>
    <script>
        var word_list = [
            {'text': '存储故障机器', 'weight': 6, 'link': '/storage_list/?keyword=故障'},
            {'text': 'GPU故障机器', 'weight': 5, 'link': '/gpu_list/?keyword=故障'},
            {'text': 'GPU已停止机器', 'weight': 4, 'link': '/gpu_list/?keyword=已停止'},
            {'text': '存储已停止机器', 'weight': 3, 'link': '/storage_list/?keyword=已停止'},
        ];
        $("#tag_cloud").jQCloud(word_list);
    </script>
    <script>
        $('.cmdb').addClass('active');
        $('.cmdb .assets').addClass('active');
    </script>
    <script>
        var WorkOrderChart = echarts.init(document.getElementById('user-nums'), 'macarons');
        WorkOrderOption = {
            tooltip: {
                trigger: 'item',
                formatter: "{b0} <br/>{a0} : {c0}"
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: true},      // 数据视图
                    magicType: {show: true, type: ['line', 'bar',]}, //图形切换
                    restore: {show: true},           // 数据复原
                }
            },
            legend: {
                orient: 'horizontal',
                x: 'left',
                data: ['宜兴矿场算力', '成都矿场算力', '内蒙古矿场算力']
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    interval: 0
                },
                data: ['2019-12-05', '2019-12-06', '2019-12-07', '2019-12-08', '2019-12-09']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '宜兴矿场算力',
                    data: [25, 20, 40, 35, 38],
                    type: 'line',
                    itemStyle: {   // 系列级个性化样式，纵向渐变填充
                        normal: {
                            color: '#1ab394'
                        }
                    },
                    smooth: true
                },
                {
                    name: '成都矿场算力',
                    data: [50, 60, 70, 85, 98],
                    type: 'line',
                    itemStyle: {   // 系列级个性化样式，纵向渐变填充
                        normal: {
                            color: '#b3551a'
                        }
                    },
                    smooth: true
                },
                {
                    name: '内蒙古矿场算力',
                    data: [10, 20, 30, 25, 38],
                    type: 'line',
                    itemStyle: {   // 系列级个性化样式，纵向渐变填充
                        normal: {
                            color: '#b3a11a'
                        }
                    },
                    smooth: true
                },
            ]
        };
        WorkOrderChart.setOption(WorkOrderOption);
    </script>
{% endblock %}
